import React, { Component } from 'react'
import { Tabs, Card, Avatar, Modal, Form, Radio, Button, message } from 'antd';
import { http } from '../../api';
import data from "../../mobx/data";
import { observer } from "mobx-react";
import { baseURL } from '../../api/ajax';
import moment from '_moment@2.29.1@moment';
import LinesEllipsis from "react-lines-ellipsis";
import {
    EditOutlined,
    EllipsisOutlined,
    SettingOutlined,
    HeartOutlined,
    StarTwoTone,
    StarOutlined,
    LikeTwoTone,
    LikeOutlined,
    HourglassOutlined,
    FireOutlined,
    LikeFilled,
    StarFilled,
    AudioOutlined,

} from "@ant-design/icons";
import { HashHistory } from '../../utils';
const { TabPane } = Tabs;
@observer
export default class Collect extends Component {

    callback = () => {

    }

    render() {
        return (
            <div>
                <Tabs defaultActiveKey="1" onChange={this.callback}>
                    <TabPane tab="面试经验" key="1">
                        <Myexperience user={data.userinfo} />
                    </TabPane>
                    <TabPane tab="套题" key="2">
                        <Mypaper user={data.userinfo} />
                    </TabPane>
                    <TabPane tab="选择题" key="3">
                        <Mychoose user={data.userinfo} />
                    </TabPane>
                </Tabs>
            </div >

        )
    }

}


class Myexperience extends Component {
    state = {
        list: [],
        flag: false,
        chooseDetails: {},
        content: null

    }
    componentDidMount() {
        var user = this.props.user
        if (user) {
            http.getstarlist({ arr: user.collectArr, type: 1 }).then(res => {
                this.setState({
                    list: res.data.temp
                })
                console.log(this.state.list, 22);
            })
        }

    }
    gotodetails = (item) => {
        HashHistory.push(
            "/main/tiku/experience/details?_id=" + item._id
        );
    }
    render() {
        const { list, flag, chooseDetails } = this.state

        return (
            <div>
                {
                    list && list.map((item, i) => {
                        return (
                            <Card
                                key={i}
                                style={{ width: "75%", padding: " 0 10px", margin: 10 }}
                                onClick={() => this.gotodetails(item, i)}
                                hoverable
                            >
                                <div>
                                    <h3>{item.title}</h3>
                                    <LinesEllipsis
                                        text={item.content
                                            .replace(/<[^<>]+>/g, "")
                                            .replace(/&nbsp;/gi, "")}
                                        maxLine={3}
                                        ellipsis="..."
                                        trimRight
                                        basedOn="letters"
                                        style={{
                                            width: "100%",
                                        }}
                                    />
                                </div>
                                <div
                                    style={{
                                        display: "flex",
                                        marginTop: 20,
                                        alignItems: "center",
                                        justifyContent: "space-between",
                                    }}
                                >
                                    <div
                                        style={{
                                            float: "left",
                                            display: "flex",
                                            alignItems: "center",
                                        }}
                                    >
                                        {item.avatar && (
                                            <Avatar
                                                src={item.avatar.replace(/public/, baseURL)}
                                                size={48}
                                            />
                                        )}
                                        <span style={{ margin: "0 10px", fontSize: "14px" }}>
                                            {item.username}
                                        </span>
                                        <span style={{ fontSize: "12px" }}>2021-6-3</span>
                                    </div>
                                    <div
                                        style={{
                                            float: "right",
                                            display: "flex",
                                            justifyContent: "center",
                                            alignItems: "center",
                                        }}
                                    >
                                        <StarFilled
                                            style={{
                                                marginLeft: 20,
                                                marginRight: 5,
                                                cursor: "pointer",
                                                display: "block",
                                            }}
                                            className="changeColor"
                                            onClick={(e) => {
                                                e.stopPropagation();
                                            }}
                                        />
                                        <span>{item.collect}</span>

                                        <LikeFilled
                                            style={{
                                                marginLeft: 20,
                                                marginRight: 5,
                                                cursor: "pointer",
                                                display: "block",
                                            }}
                                            className="changeColor"
                                            onClick={(e) => {
                                                e.stopPropagation();
                                            }}
                                        />
                                        <span>{item.star}</span>
                                    </div>
                                </div>
                            </Card>


                        )
                    })
                }
            </div>
        )
    }
}
class Mypaper extends Component {
    state = {
        list: [],
        flag: false,
        chooseDetails: {},
        content: null

    }
    componentDidMount() {
        var user = this.props.user
        if (user) {

            http.getstarlist({ arr: user.collectArr, type: 2 }).then(res => {
                this.setState({
                    list: res.data.temp
                })

            })
        }
    }
    taotidetails = (item) => {
        HashHistory.push("/main/tiku/choose/taotidetails:item=" + item._id)
    }
    render() {
        const { list, flag, chooseDetails } = this.state
        return (
            <div>
                {
                    list && list.map((item, i) => {
                        return (
                            <Card
                                key={i}
                                style={{ width: "60%", padding: " 0 10px", margin: 10 }}
                                hoverable
                                onClick={() => { this.taotidetails(item) }}
                            >
                                <div style={{ display: "flex", justifyContent: "space-between", minHeight: "150px", }}>
                                    <div style={{ position: "relative", width: "100%" }}>
                                        <div style={{ position: "absolute", top: "30px", left: "0" }}>
                                            <span>卷名:</span><span>{item.title}</span>
                                        </div>
                                        <div style={{ position: "absolute", bottom: "0", left: "0" }}>
                                            <span>相关技术:</span><span>{item.technology}</span>
                                        </div>
                                    </div>
                                    <div style={{ display: "flex", alignItems: "flex-end" }}>
                                        <StarFilled
                                            style={{
                                                marginLeft: 20,
                                                marginRight: 5,
                                                cursor: "pointer",
                                                display: "block",
                                            }}
                                            className="changeColor"
                                            onClick={(e) => {
                                                e.stopPropagation();
                                            }}
                                        />
                                        <span>{item.shouchang}</span>

                                        <LikeFilled
                                            style={{
                                                marginLeft: 20,
                                                marginRight: 5,
                                                cursor: "pointer",
                                                display: "block",
                                            }}
                                            className="changeColor"
                                            onClick={(e) => {
                                                e.stopPropagation();
                                            }}
                                        />
                                        <span>{item.dianzan}</span>
                                    </div>
                                </div>
                            </Card>


                        )
                    })
                }
            </div>
        )
    }
}
class Mychoose extends Component {
    state = {
        list: [],
        flag: false,
        chooseDetails: {},
        content: null

    }
    layout = {

        wrapperCol: {
            span: 16,
        },
    };
    tailLayout = {
        wrapperCol: {

            span: 16,
        },
    };
    componentDidMount() {
        var user = this.props.user

        if (user) {
            http.getstarlist({ arr: user.collectArr, type: 3 }).then(res => {
                console.log(res.data.temp);
                this.setState({
                    list: res.data.temp
                })
            })
        }
    }
    choosedetails = (item) => {
        this.showModal(item)
    }
    showModal = (item) => {
        this.setState({
            flag: true,
            chooseDetails: item
        })
        console.log();
    };
    handleOk = () => {
        this.setState({
            flag: false
        })
    }
    handleCancel = () => {
        this.setState({
            flag: false
        })
    }
    onFinish = () => { }
    changeCorrect = (e) => {
        this.setState({
            content: e.target.value
        })
    }
    submitchoose = () => {
        if (this.state.content == this.state.chooseDetails.correct) {
            message.info('选择正确');
        } else {
            message.error('选择错误');
        }
    }
    showsubject = () => {

        this.showanswer.style.display = "block"
    }
    changcollect = () => {
        http.deleteshouchang({
            type: 1,
            _id: this.state.chooseDetails._id,
            heat: this.state.chooseDetails.heat,
            shouchang: this.state.chooseDetails.shouchang,
        }).then(res => {
            if (res.data.code == 200) {
                this.spanhove1.style.background = "rgb(0,0,0,10%)"
                message.error('取消成功');
            }
        })
    }
    changstar = () => {
        http.deletedianzan({
            type: 1,
            _id: this.state.chooseDetails._id,
            heat: this.state.chooseDetails.heat,
            dianzan: this.state.chooseDetails.dianzan,
        }).then(res => {
            if (res.data.code == 200) {
                this.spanhove2.style.background = "rgb(0,0,0,10%)"
                message.error('取消成功');
            }
        })
    }
    render() {
        const { list, flag, chooseDetails } = this.state
        return (
            <div>{
                list && list.map((item, i) => {
                    return (
                        <Card
                            key={i}
                            style={{ width: "60%", padding: " 0 10px", margin: 10 }}
                            hoverable
                            onClick={() => { this.choosedetails(item) }}
                        >
                            <div style={{ display: "flex", justifyContent: "space-between", minHeight: "150px", }}>
                                <div style={{ position: "relative", width: "100%" }}>
                                    <div style={{ position: "absolute", top: "30px", left: "0" }}>
                                        {item.subject}
                                    </div>
                                    <div
                                        style={{
                                            position: "absolute", bottom: "0", left: "0"
                                        }}
                                    >
                                        {item.avatar && (
                                            <Avatar
                                                src={item.avatar.replace(/public/, baseURL)}
                                                size={48}
                                            />
                                        )}
                                        <span style={{ margin: "0 10px", fontSize: "14px" }}>
                                            {item.username}
                                        </span>
                                        <span style={{ fontSize: "12px" }}>
                                            {moment(item.time).format("YYYY-MM-DD hh:mm:ss")}
                                        </span>
                                    </div>
                                </div>
                                <div style={{ display: "flex", alignItems: "flex-end" }}>
                                    <StarFilled
                                        style={{
                                            marginLeft: 20,
                                            marginRight: 5,
                                            cursor: "pointer",
                                            display: "block",
                                        }}
                                        className="changeColor"
                                        onClick={(e) => {
                                            e.stopPropagation();
                                        }}
                                    />
                                    <span>{item.shouchang}</span>

                                    <LikeFilled
                                        style={{
                                            marginLeft: 20,
                                            marginRight: 5,
                                            cursor: "pointer",
                                            display: "block",
                                        }}
                                        className="changeColor"
                                        onClick={(e) => {
                                            e.stopPropagation();
                                        }}
                                    />
                                    <span>{item.dianzan}</span>
                                </div>
                            </div>
                        </Card>


                    )
                })
            }
                <Modal title="选择题" visible={flag} key={chooseDetails._id} onOk={this.handleOk} onCancel={this.handleCancel}>
                    {


                        <Form
                            {...this.layout}
                            name="choose"
                            onFinish={this.onFinish}
                            onFinishFailed={this.onFinishFailed}
                            layout="vertical"

                        >
                            <Form.Item
                                label="题目"
                                name="subject"

                            >

                                <p>{chooseDetails.subject}</p>
                            </Form.Item>

                            <Form.Item
                                label="选项"
                                name="answer"

                            >
                                {chooseDetails.answer &&
                                    <Radio.Group onChange={this.changeCorrect} style={{ height: 30 }}>
                                        <Radio value="A" style={{ display: "block" }}>A、{chooseDetails.answer[0]}</Radio>
                                        <Radio value="B" style={{ display: "block" }}>B、{chooseDetails.answer[1]}</Radio>
                                        <Radio value="C" style={{ display: "block" }}>C、{chooseDetails.answer[2]}</Radio>
                                        <Radio value="D" style={{ display: "block" }}>D、{chooseDetails.answer[3]}</Radio>
                                    </Radio.Group>
                                }
                            </Form.Item>
                            <Form.Item
                                label="题目"
                                name="subject"

                            >
                                <Button type="primary" onClick={this.submitchoose}>提交答案</Button>
                            </Form.Item>
                            <Form.Item
                                label="题目"
                                name="subject"

                            >
                                <Button type="primary" onClick={this.showsubject}>显示正确答案答案</Button>
                                <p style={{ display: "none" }} ref={(el) => { this.showanswer = el }}>{chooseDetails.correct}</p>
                            </Form.Item>

                            <div style={{ display: "flex", height: 30 }}>
                                <p style={{
                                    marginRight: "10px", width: 50, height: 30, background: "skyblue", display: "flex",
                                    justifyContent: "center", alignItems: "center"
                                }} className="spanhove1"
                                    ref={(el) => { this.spanhove1 = el }}
                                    onClick={this.changcollect}
                                ><StarFilled />收藏</p>
                                <p className="spanhove2" style={{
                                    marginRight: "10px", width: 50, height: 30, background: "skyblue", display: "flex",
                                    justifyContent: "center", alignItems: "center"

                                }}
                                    ref={el => { this.spanhove2 = el }}
                                    onClick={this.changstar}
                                ><LikeFilled />点赞</p>
                            </div>
                        </Form>


                    }
                </Modal>
            </div>
        )
    }
}
